博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Wepy--小程序自定义底部tabBar
阅读量:6119 次
发布时间:2019-06-21

本文共 3364 字,大约阅读时间需要 11 分钟。

PS后续:

  说来惭愧, 没想到这篇文章浏览的人有点多. 说实话写的挺乱的. 并且自定义tabbar还有闪屏的问题.

  因为有好几位道友都问了这个问题,  其中一位因为项目很急,所以就研究了一下(也是借鉴大佬的想法),  差不多解决了闪屏的问题.但还是有点小瑕疵.

  解决自定义tabbar闪屏的问题, 参考链接: 

  本人也是前端路上的小白(工作满打满算才 一年半...), 所以写的有什么不对的地方, 还望指出呐.

  解决闪屏的代码就直接放压缩包链接了, 需要的话可以下载去借鉴 :  

    运行项目之前, 还是去看一下大佬的文章, 这样思路更清晰.

    运行项目, 需要对wepy有所了解, 不了解的可以去查看官方文档, 

    还有小程序项目的appId需要弄成测试号, 不然这是我的(因为懒,就没删appId),没法跑.

    还有, 项目的初始页面得是自定义tabbar页面的其中一个, 也就是在app.json中config下的pages,  不然的话会出问题(否则只能在每个页面去隐藏官方tabbar了)  -- 先看参考链接, 先看参考链接, 先看参考链接,

对于下面的文章, 因为写的不好, 并且问题也多, 所以不建议去看了. 可以直接下载代码压缩包,毕竟在编译器上看代码还是最爽的.

 

 

因为需求,小程序自带的tabBar不能满足, 所以只能来自己重新写一个. 先看效果图吧

 首页:

发现:

消息:

我的:

接下来看代码:

1- 组件-- tabBarBottom.wpy  这里页面也可以用循环来写, 不过就要在样式上再去调整, 我这里没有用循环, 就将就看吧..... 

  view 中的 c-y 与 c-gray 是公共样式中, 控制图标颜色的切换;  因为这里的图标我用的是阿里云图标, 不是图片, 可以自己替换成图片, 根据 selected 进行图片切换

2- tabBar的数据 , 我放在了启动文件中 app.wpy

1   globalData = { 2     userInfo: null,     // tabBar数据 3     tabBar:{ 4       list: [ 5         { 6           pagePath: "home", 7           text: "首页", 8           icon_class: "iconfont icon-tab-home",  //这里用的是阿里图标,  可以替换成图片 9           selected: true         //图片写法         // img: '未选中的图片路径',         // img_act: '被选中的图片路径' 10         },11         {12           pagePath: "find",13           text: "发现",14           icon_class: "iconfont icon-tab-find",15           selected: false16         }, 17         {18           pagePath: "news",19           text: "消息",20           icon_class: "iconfont icon-tab-news",21           selected: false22         },23         {24           pagePath: "myInfo",25           text: "我的",26           icon_class: "iconfont icon-tab-my",27           selected: false28         }29       ]30     }31   }     // 处理tabBar中点击, 被点击,将当前的数据对象中 selected 改成true, 其余的就得改成 false;  这里的id是标识, 在调用时手动传入的; id 与 tabBar数组每一个对象索引要对应32   tabBarClickHandle(id, that) {33       let tbList = this.globalData.tabBar.list;34       tbList.forEach((item, index) => {35           if (id == index) {36               tbList[id].selected = true;37           } else {38               tbList[index].selected = false;39           }40       });41       that.$apply();42       return this.globalData.tabBar;43   }

3- 首页中使用组件  剩余的 发现,消息,我的这三个页面中都是这样的用法, 都是这五步, 不过剩余的三个 在第四步中 id要变   发现--id-1  消息--id-2  我的--id-3

1 
8
22         this.tabBarData = this.$parent.tabBarClickHandle(0, this);23         this.$apply();24     }25     computed = {26 27     }28     methods = {29 30     }31     event = {32 33     }34 }35 

 

慢慢积累,慢慢成长,加油!!

文章中如果有错误,请您指出,我会第一时间去修改; 

①:

转载于:https://www.cnblogs.com/yk95/p/9597493.html

你可能感兴趣的文章
微信支付申请90%的商户都卡在这儿了,申请微信支付,商户功能设置详细说明...
查看>>
高仿Instagram 页面效果android特效
查看>>
2016 年总结
查看>>
将String转化成Stream,将Stream转换成String
查看>>
java路径Java开发中获得非Web项目的当前项目路径
查看>>
【工具使用系列】关于 MATLAB 遗传算法与直接搜索工具箱,你需要知道的事
查看>>
Kali-linux Arpspoof工具
查看>>
PDF文档页面如何重新排版?
查看>>
基于http协议使用protobuf进行前后端交互
查看>>
bash腳本編程之三 条件判断及算数运算
查看>>
php cookie
查看>>
linux下redis安装
查看>>
弃 Java 而使用 Kotlin 的你后悔了吗?| kotlin将会是最好的开发语言
查看>>
JavaScript 数据类型
查看>>
量子通信和大数据最有市场突破前景
查看>>
StringBuilder用法小结
查看>>
对‘初学者应该选择哪种编程语言’的回答——计算机达人成长之路(38)
查看>>
如何申请开通微信多客服功能
查看>>
Sr_C++_Engineer_(LBS_Engine@Global Map Dept.)
查看>>
非监督学习算法:异常检测
查看>>